<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>新闻助手</title>
    <!--引入font-awsome.css,使用通过css便可绘制出常用图标-->
    <link rel="stylesheet" href="/static/css/css/font-awesome.min.css">
    <!--样式重置文件-->
    <link rel="stylesheet" href="{{url_for('static',filename='css/reset.css')}}">
    <!--自定义样式文件，实现对话聊天页面样式-->
    <link rel="stylesheet" href="/static/css/index.css"> 
    
</head>

<body>
    <div class="chat" id="app">
        <div class="chat-header">
            <div class="chat-header-user">
                <figure class="avatar avatar-lg">
                    <!-- /static/xxx/xxx/... 相对于服务端根目录 -->
                    <img src="/static/images/robot_avatar.jpg" class="rounded-circle">
                </figure>
                <div>
                    <h5>新闻助手</h5>
                    <small class="text-muted">
                        <i>Online</i>
                    </small>
                </div>
            </div>

        </div>
        
        <div class="chat-body" v-bind:style="{ overflow: overFlow}">
            <div class="message">
                <!-- raw endraw 解决在flask后端渲染与vue前端渲染冲突 -->
                {% raw %}
                <!-- 通过v-for循环渲染消息列表，通过type属性确定是发送还是接收消息 0：接收的消息 -->
                <div v-for="item in queue" :class="[item.type==0?inclass:outclass]">
                    <template v-if="item.ResultType == '6'">
                        <div v-for="item2 in item.content" class="message-content">
                            <a href="javascript:void(false)" @click='getDetail(item2.Url,item2.Content)'  :title="''+ item2.Abstract" target="blank">{{item2.Content}}</a>
                        </div>
                        <div class="message-action">
                            {{item.time}}
                        </div>
                    </template>
                    <template v-else>
                        <div class="message-content">
                            {{item.content}}
                        </div>
                        <div class="message-action">
                            {{item.time}}
                        </div>
                    </template>
                </div>
                {% endraw %}
            </div>
        </div>
        <div class="chat-footer" style="">
            <!-- @submit.prevent 触发表单提交事件的同时可阻止表单提交事件默认行为，即刷新页面 -->
            <form action="" @submit.prevent="onSubmit">
                <input type="text" v-model="message" class="form-control" placeholder="Enter your text"
                    aria-label="Recipient's username" aria-describedby="button-addon2">
                <div class="form-buttons">
                    <button class="btn btn-light btn-floating" type="button">
                        <i class="fa fa-paperclip"></i>
                    </button>
                    <button class="btn btn-light btn-floating" type="button">
                        <i class="fa fa-microphone"></i>
                    </button>
                    <button class="btn btn-primary btn-floating" type="submit">
                        <i class="fa fa-send"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    
    <!-- 引入axios.min.js 在Vue中发送ajax请求 -->
    <script src="/static/js/axios.min.js"></script>
    <!-- 引入Vue.js  -->
    <script src="/static/js/vue.min.js"></script>

    <script type="text/javascript">
            // window.onload = () => {
            //     console.log(document.body.scrollHeight)
            //      document.getElementsByTagName("body")[0].style.height = document.body.scrollHeight+"px";
            //      document.getElementsByTagName("body")[0].style.width  = document.body.scrollWidth+"px";
            //  }

        var app = new Vue({
            el: '#app', // 将创建的vue对象挂载到id为app的div元素
            data: { // data对象定义vue对象中使用的变量
                inclass: "message-item", // 接受消息样式，位于左边
                outclass: "message-item outgoing-message", // 发送消息的样式，位于右边
                message: '昨天有什么新闻',// 绑定input输入框文本，接受输入文本
                context: {
                    
                },//绑定当前会话上下文
                queue: []    // 用于存放消息列表，消息结构为 [{content:"",time:"",type:""},.....] 
                            //content：消息内容，time：消息发送/接收时间，type：消息类型。queue消息队列发生变化，页面自动重新渲染
            },
            created: function (){
                var text = {}
                text.content = "欢迎使用你的新闻助手siri~"
                text.time = this.time()
                // 接收的消息，类型设置为 0
                text.type = 0
                // 将消息对象添加到消息队列中
                this.queue.push(text)
            },
            methods: {
                getDetail: function(url,title) {

                    var text = {}
                    text.content = title
                    text.time = this.time()
                    // 接收的消息，类型设置为 0
                    text.type = 1
                    // 将消息对象添加到消息队列中
                    this.queue.push(text)

                    axios.post('/news/content'+url, {
                        message: this.message,
                        context: this.context
                    }).then(function (response) { 
                        // 将返回信息封装成json对象
                        var text = {}
                        text.content = response.data
                        text.time = _this.time()
                        // 接收的消息，类型设置为 0
                        text.type = 0
                        // 将消息对象添加到消息队列中
                        _this.queue.push(text)
                    })
                },
                // 提交表单时间
                onSubmit: function () {
                    // 将消息封装成json对象
                    var text = {}
                    // 判断文本输入框消息是否为空，如果为空，给出提示
                    if (this.message == "" || this.message == null) {
                        alert("发送内容不能为空！")
                        return false
                    }
                    // 添加消息对象content属性
                    text.content = this.message
                    // 添加消息对象time属性，使用当前时间
                    text.time = this.time()
                    // 添加消息对象type属性，0 为接收的消息，1 为发出的消息
                    text.type = 1
                    // 将消息对象添加到queue消息队列中
                    this.queue.push(text)
                    _this = this
                    // 随着消息增多，内容溢出，消息框出现滚动条，每次发送消息将滚动条滚动到消息窗体最底端
                    _this.scrollToBottom()
                    // 将消息发送到flask服务端 /api/chat 接口
                    url = '/api/chat';
                    axios.post(url, {
                        message: this.message,
                        context: this.context
                    }).then(function (response) {  // response为ajax返回结果
                        if (response.data.error) return false  //判断返回结果是否含有错误信息，若有，则返回false
                        // 智能机器人返回的消息结果在response.data属性中
                        
                        // 将返回信息封装成json对象
                        var text = {}
                        text.content = [].concat(response.data.ResponseMessage.GroupList)
                        text.ResultType = response.data.ResultType
                        _this.context = response.data

                        console.log(response.data);
                        console.log(text);
                        text.time = _this.time()
                        // 接收的消息，类型设置为 0
                        text.type = 0
                        // 将消息对象添加到消息队列中
                        _this.queue.push(text)
                        // 消息滚动对象滚动到最底端
                        _this.scrollToBottom()
                    }).catch(function (error) {
                        console.log(error);
                        alert("消息发送失败")
                    });
                    this.message = ""
                },
                // 根据当前时间戳解析出小时、分、上午下午（AM、PM）
                time: function () {
                    var now = new Date;
                    var h = now.getHours();
                    var mm = now.getMinutes();
                    var str;
                    if (h > 12) {
                        h -= 12;
                        str = " PM";
                    } else {
                        str = " AM";
                    }
                    // 小时或分钟小于10，高位补0
                    h = h < 10 ? "0" + h : h;
                    mm = mm < 10 ? "0" + mm : mm;
                    var xy = h + ":" + mm
                    xy += str;
                    return xy;
                },
                // 将消息窗体滚动条滚动到最底端
                scrollToBottom: function () {
                    this.$nextTick(() => {
                        var container = this.$el.querySelector(".chat-body");
                        container.scrollTop = container.scrollHeight;
                    });
                }
            },
            computed: {
                // 根据消息队列数量，动态绑定消息窗体overflow样式属性
                overFlow: function () {
                    return this.queue.length > 0 ? "auto" : "hidden"
                }
            }
        })
    </script>
</body>

</html>